<template>
    <div class="upload-avatar-container">
        <Upload @uploadEvt="getAvatar" propsSize="80px" />
        <el-input v-model="actorInfo.name" size="small" placeholder="真实名字"></el-input>
        <el-input v-model="actorInfo.role" size="small" placeholder="剧本昵称"></el-input>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const getAvatar = (avatar) => {
    actorInfo.value.avatarAddress = avatar
}
const actorInfo = ref({
    name: '',
    role: '',
    avatarAddress: ''
})
const emit = defineEmits(['actorsEvt'])
watch(actorInfo, () => {
    if (actorInfo.value.name && actorInfo.value.role && actorInfo.value.avatarAddress) {
        emit('actorsEvt', actorInfo.value)
    }
}, { deep: true })

</script>

<style lang="scss" scoped>
.upload-avatar-container {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>